import React, { useState, useEffect } from 'react'

function loopHook() {
    const initData = {
        name: "张三",
        age: 28,
        children: [
            {
                name: "张小",
                age: 2,
            }
        ]
    }

    const [state, setState] = useState(initData)

    useEffect(() => {
        console.log("更新了state", state)
    }, [state])

    
    return (
        <div>
            <button onClick={() => {
                // 不能直接在源数据上修改，否则就是浅比较
                state.children = []
                setState(state)

                // 应该创建一个新的对象进行返回，浅比较也可以通过（新对象地址以及改变了）
                // setState({
                //     ...state,
                //     children: []
                // })
            }}>更新数据state</button>
        </div>
    )
}

export default loopHook
